<template>
    <template v-for="menu in menuData" :key="menu.id">
        <template v-if="menu.type == 0">
            <a-sub-menu :key="`${dirMenuFlag}${menu.code}`">
                <template v-if="menu.icon" #icon>
                    <Icon :icon="menu.icon"></Icon>
                </template>
                <template #title>
                    {{menu.name}}
                </template>
                <template v-if="!isEndMenuNode(menu)">
                    <menu-render :menu-data="menu.children" :dirMenuFlag="dirMenuFlag"/>
                </template>
            </a-sub-menu>
        </template>
        <template v-else-if="menu.type == 1">
            <template v-if="!isEndMenuNode(menu)">
                <a-sub-menu :key="menu.url">
                    <template v-if="menu.icon" #icon>
                        <Icon :icon="menu.icon"/>
                    </template>
                    <template #title>
                        {{menu.name}}
                    </template>
                    <menu-render :menu-data="menu.children" :dirMenuFlag="dirMenuFlag"/>
                </a-sub-menu>
            </template>
            <template v-else>
                <a-menu-item :key="menu.url">
                    <template v-if="menu.icon" #icon>
                        <Icon :icon="menu.icon"/>
                    </template>
                    {{menu.name}}
                </a-menu-item>
            </template>
        </template>
        <template v-else-if="menu.type === 2">

        </template>
    </template>
</template>

<script setup lang="ts">
import {ref} from "vue";
import type {UserMenus} from "@/store/login/types";
import {Icon} from "@c/base/Icon";

const props = defineProps<{
    menuData: UserMenus[],
    dirMenuFlag: string
}>()

const isEndMenuNode = (menu:UserMenus):boolean => {

    let result = true;
    const menuChildren = menu.children ?? [];

    for(let i = 0 ; i < menuChildren.length ; i++){
        if (menuChildren[i].type !== 2){
            result = false;
            break;
        }
    }
    return result;
}
</script>

<style scoped lang="less">

</style>
